import { Popover } from 'antd';
import React from 'react';
import styles from './index.less';
import type { IProps } from '@/components/CustomElement/PopoverDescription/interface';
// 浮窗描述
const PopoverDescription: React.FC<IProps> = ({
    title,
    content,
    children,
    position = 'top',
    trigger = 'hover',
    rowKey,
}) => {
    if (Array.isArray(content)) {
        const jsxList = content.map((item, index) => (
            <div key={rowKey ? item[rowKey] : index} className={styles.popover_list}>
                <span>{item?.label}：</span>
                <span>{item?.text}</span>
            </div>
        ));
        return (
            <Popover title={title} content={jsxList} placement={position} trigger={trigger}>
                {children}
            </Popover>
        );
    }
    return (
        <Popover title={title} content={content} placement={position} trigger={trigger}>
            {children}
        </Popover>
    );
};

export default PopoverDescription;
